<!-- 给排水 》 给水系统 -->

<template>
  <el-card
    class="water-supply"
    shadow="never"
    body-style="display: flex; flex-direction: column; height: calc(100% - 20px); padding: 10px 15px;"
  >
    <WaterSupplyBrands class="water-supply__top-brands" />
    <div class="water-supply__canvas-wrapper">
      <ModelFrame path="/water/supply" />
    </div>

    <EasyModal v-model="pumpDetailsDialogIsShow" title="设备详情" :width="800" :no-footer="true">
      <PumpDetails />
    </EasyModal>
    <EasyModal v-model="waterTankDetailsDialogIsShow" title="设备详情" :width="800" :no-footer="true">
      <WaterTankDetails />
    </EasyModal>
  </el-card>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import SourceCold from '@admin/views/Monitor/Source/SourceCold'

import WaterSupplyBrands from './components/brands/index.vue'
import PumpDetails from './components/pump-details/index.vue'
import WaterTankDetails from './components/water-tank-details/index.vue'

// ============================== 导出组件 ============================== //

export default CORE.extend(SourceCold, {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'WaterSupply',
  components: {
    WaterSupplyBrands,
    PumpDetails,
    WaterTankDetails,
  },
  data() {
    return {
      /**
       * 水泵详情对话框是否显示
       */
      pumpDetailsDialogIsShow: false,
      /**
       * 水箱详情对话框是否显示
       */
      waterTankDetailsDialogIsShow: false,
    }
  },
})
</script>

<style lang="scss">
@import './index.scss';
</style>
